<template>
  <div class="home-container">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder>
      <!-- 左边插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 右边插槽 -->
      <template #right>
        <van-button round class="search-btn" size="small" icon="search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- tab栏 标签页 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title">
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item v-for="(value,index) in item.cover.images" :key="index">
                      <van-image
                        :src="value"
                        lazy-load
                      />
                    </van-grid-item>
                  </van-grid>
                  <div>
                    <span>{{item.aut_name}}</span>&nbsp;
                    <span>{{item.comm_count}}评论</span>&nbsp;
                    <span>{{item.pubdate | fromNow}}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
  //导入新闻列表接口
  import { getChannelList,getArticleList } from './home.js'
  //导入 moment
  import  moment from 'moment'
  //设置语言
  moment.locale("zh-cn")

export default {
  name: "home",
  data() {
    return {
      active: 0,
      loading: false, //上拉，加载更多动画
      finished: false, //上拉加载数据开关
      list: [], //列表数据
      isLoading: false, //下拉刷新动画
      channels:[],//频道列表
      timestamp:null,//首页时间戳
    };
  },
  async created(){
    //1 加载频道列表
    let res = await getChannelList()
    console.log(res);
    //1.1 绑定数据
    this.channels = res.data.data.channels
  },
  methods: {
    //上拉加载更多
   async onLoad() {
      //2 加载文章列表
        //2.1 判断是不是第一页
        if(!this.timestamp){
          this.timestamp = Date.now()
        }
        //2.2 请求数据
         let res = await getArticleList({
           channel_id:this.channels[this.active].id,
           timestamp:this.timestamp
         })
         //2.3 绑定数据
         this.timestamp = res.data.data.pre_timestamp
         this.list.push(...res.data.data.results)
         console.log(res);
        //2 数据加载完后，关闭加载动画
        this.loading = false;
        //3 最多50条数据 当所有元素加载完毕 就停止滚动
        if (this.list.length >= 50) {
          this.finished = true;
        }
    
    },
    onRefresh() {
      //下拉刷新事件
      //清空时间戳
       this.timestamp=null
      //1 清空当前数据
      this.list = [];
      //重新加载数据
      this.loading = true;
      this.onLoad();
      //3 关闭下拉刷新的动画
      this.isLoading = false;
      this.finished = false;
    },
    // tabe栏点击事件
    tabClick(){
      this.onRefresh()
    }
  },
  //过滤器
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
  }

};
</script>


<style lang="less">
.home-container {
  height: 100vh;
  box-sizing: border-box;
  // 1.顶部栏
  .van-nav-bar {
    background-color: #0098fa;
    .logo {
      background: url("~@/assets/logo.png") no-repeat;
      width: 100px;
      height: 30px;
      background-size: cover;
    }
    // 搜索按钮
    .search-btn {
      background-color: #5babfb;
      width: 100px;
      font-size: 14px;
      border: none;
      .van-button__icon {
        color: #fff;
      }
      .van-button__text {
        color: #fff;
      }
    }
  }

  //tab 标签页
  //头部
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    //添加层级
    z-index: 2;
    width: 100%;
  }
  .van-list {
    padding-bottom: 50px;
    padding-top: 46px;
    //内容部分
    .van-tabs__content {
      margin-top: 44px;
      // margin-bottom: 0;
      // overflow-y: scroll;
      // height: 100%;
    }
  }
}
</style>